<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GetDATA</title>

<link rel="stylesheet" href="../lib/codemirror/codemirror.css">
<link rel="stylesheet" href="../lib/codemirror/addom/hint/show-hint.css">
<link rel="stylesheet" href="../lib/codemirror/theme/darcula.css">
<link rel="stylesheet" href="../lib/element-ui/index.css">
<link rel="stylesheet" href="./index.css">

</head>

<body onload="Snail.app.init()">

	<div id="app">

		<el-tabs v-model="style.selectedIndex" tab-position="left" @tab-click="onTabsChange" style="height: 100%;">
		
			<el-tab-pane label="数据源" name="first" >
				<div class="app-db">
				
					<div>
						<el-table :data="db.tableData" style="width: 100%" highlight-current-row>
							<el-table-column type="index" width="50">
								<template slot-scope="scope">
									<span v-if="basic.db == scope.row.mark" class="app-db-selected"></span>
								</template>
							</el-table-column>
							<el-table-column property="name" label="数据源名称" width="120"></el-table-column>
							<el-table-column property="product" label="数据库类型" width="120"></el-table-column>
							<el-table-column property="driver_class" label="驱动类名" width="160" show-overflow-tooltip></el-table-column>
							<el-table-column property="driver_url" label="数据源URL" width="280" show-overflow-tooltip></el-table-column>
							<el-table-column property="username" label="用户名" width="120"></el-table-column>
							<el-table-column property="mark" label="连接标识" width="120"></el-table-column>
							<el-table-column property="description" label="说明"></el-table-column>
							<el-table-column fixed="right" label="操作" width="200" align="center">
							  <template slot-scope="scope">
								<el-button type="text" size="small" @click="onSelectDB(scope.$index, scope.row)" >设为数据源</el-button>
								<el-button type="text" size="small" @click="onDBEdit(scope.$index, scope.row)" >修改</el-button>
							  </template>
							</el-table-column>
						</el-table>
					</div>
		
					<div>
						<div><span>&#xe850;</span></div>
						<div>
							<el-form :model="db.formData.fields" :rules="db.formData.rules" ref="dbFormData" label-width="100px" status-icon>
								<el-form-item label="数据源名称" prop="name">
									<el-input v-model="db.formData.fields.name"></el-input>
								</el-form-item>
								<el-form-item label="数据库类型" prop="product">
									<el-select v-model="db.formData.fields.product" placeholder="请选择数据库类型" @change="onDBProductChang">
										<el-option label="MySQL" value="MYSQL"></el-option>
										<el-option label="MySQL6X" value="MYSQL6X"></el-option>
										<el-option label="Oracle" value="ORACLE"></el-option>
										<el-option label="SQL Server" value="SQLSERVER"></el-option>
										<el-option label="PostgreSQL" value="POSTGRESQL"></el-option>
										<el-option label="DB2" value="DB2"></el-option>
										<el-option label="DM" value="DM"></el-option>
										<el-option label="KingBase" value="KINGBASE"></el-option>
										<el-option label="Oscar" value="OSCAR"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="驱动类名" prop="driver_class">
									<el-input v-model="db.formData.fields.driver_class" autocomplete="off"></el-input>
								</el-form-item>
								<el-form-item label="数据源URL" prop="driver_url">
									<el-input v-model="db.formData.fields.driver_url" autocomplete="off"></el-input>
								</el-form-item>
								<el-form-item label="用户名" prop="username">
									<el-input v-model="db.formData.fields.username" autocomplete="off"></el-input>
								</el-form-item>
								<el-form-item label="密码" prop="password">
									<el-input v-model="db.formData.fields.password" type="password" autocomplete="off"></el-input>
								</el-form-item>
								<el-form-item label="连接标识" prop="mark">
									<el-input v-model="db.formData.fields.mark" autocomplete="off"></el-input>
								</el-form-item>
								<el-form-item label="说明">
									<el-input type="textarea" v-model="db.formData.fields.description"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="danger" icon="el-icon-cpu" @click="onTestDB" round>测试</el-button>
									<el-button type="primary" icon="el-icon-success" @click="onSaveDB" round>保存</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
					
				</div>
			</el-tab-pane>
			
			<el-tab-pane label="数据集" name="second" >
				<div class="app-dataset">
					<div>
						<el-form :model="dataset.formData.fields" :rules="dataset.formData.rules" size="mini" ref="datasetFormData" label-width="120px" status-icon>
							<el-form-item label="数据集名称：" prop="name">
								<el-input v-model="dataset.formData.fields.name">
									<el-button slot="append" icon="el-icon-copy-document" @click="dataset.quote.dialogVisible = true"></el-button>
								</el-input>
							</el-form-item>
							<el-form-item label="类型：" prop="type">
								<el-select v-model="dataset.formData.fields.type" @change="onDatasetChange">
									<el-option label="SQL" value="sql"></el-option>
									<el-option label="HTTP" value="http"></el-option>
									<el-option label="Groovy" value="groovy"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
						<textarea name="script_content" id="script_content"></textarea>
						<div>
							<el-button type="danger" icon="el-icon-cpu" size="small" @click="onSaveDatasetConf" round>保存</el-button>
							<el-button type="primary" icon="el-icon-success" size="small" @click="onTestDatasetConf" round>测试</el-button>
						</div>
					</div>
					<div>
						<div>
							<div>
								<span>输入：</span>
								<div>
									<el-form :inline="true" size="mini" >
										<el-form-item>
											<el-button type="primary" icon="el-icon-arrow-up" @click="onUpMoveInData" title="向前移动一行" circle></el-button>
											<el-button type="primary" icon="el-icon-arrow-down" @click="onDnMoveInData" title="向后移动一行" circle></el-button>
										</el-form-item>
									</el-form>
								</div>
							</div>
							<div>
								<el-table :data="dataset.inTableData" row-key="key" @current-change="onInDataTableChange" style="width: 100%" highlight-current-row>
									<el-table-column property="key" label="参数键" width="160"></el-table-column>
									<el-table-column property="name" label="参数名" width="160" header-align="center">
										<template slot-scope="scope">
											<el-input v-model="scope.row.name" size="mini"></el-input>
										</template>
									</el-table-column>
									<el-table-column property="inKey" label="关联字段" width="220" header-align="center">
										<template slot-scope="scope">
											<el-select v-model="scope.row.inKey" v-if="!scope.row.children" size="mini" placeholder="" filterable clearable>
												<el-option-group v-for="group in formFieldSelect.groups" :key="group.key" :label="group.label">
													<el-option v-for="item in group.options" :key="item.id" :label="item.label" :value="item.value">
												</el-option-group>
											</el-select>
										</template>
									</el-table-column>
									<el-table-column property="type" label="数据类型" width="120" header-align="center">
										<template slot-scope="scope">
											<el-select v-model="scope.row.type" size="mini">
												<el-option label="文本" value="string"></el-option>
												<el-option label="模糊文本" value="like"></el-option>
												<!-- 暂无支持
												<el-option label="数字" value="number"></el-option>
												<el-option label="日期" value="date"></el-option>
												<el-option label="日期时间" value="datetime"></el-option> -->
											</el-select>
										</template>
									</el-table-column>
									<el-table-column property="defaultValue" label="默认值" header-align="center">
										<template slot-scope="scope">
											<el-input v-model="scope.row.defaultValue" size="mini"></el-input>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
						<div>
							<div>
								<span>输出：</span>
								<div>
									<el-form :inline="true" size="mini" >
										<el-form-item>
											<el-button type="primary" icon="el-icon-arrow-up" @click="onUpMoveOutData" title="向前移动一行" circle></el-button>
											<el-button type="primary" icon="el-icon-arrow-down" @click="onDnMoveOutData" title="向后移动一行" circle></el-button>
										</el-form-item>
									</el-form>
								</div>
							</div>
							<div>
								<el-table :data="dataset.outTableData" row-key="key" @current-change="onOutDataTableChange" style="width: 100%" highlight-current-row>
									<el-table-column property="key" label="参数键" width="160"></el-table-column>
									<el-table-column property="name" label="显示名称" width="160" header-align="center">
										<template slot-scope="scope">
											<el-input v-model="scope.row.name" size="mini"></el-input>
										</template>
									</el-table-column>
									<el-table-column property="width" label="宽度" width="80" header-align="center" align="center">
										<template slot-scope="scope">
											<el-input v-model="scope.row.width" type="number" size="mini"></el-input>
										</template>
									</el-table-column>
									<el-table-column property="type" label="唯一标示" width="120" header-align="center" align="center">
										<template slot-scope="scope">
											<el-switch v-model="scope.row.unqiue" active-color="#13ce66" inactive-color="#cbcbcb"></el-switch>
										</template>
									</el-table-column>
									<el-table-column property="type" label="是否显示" width="120" header-align="center" align="center">
										<template slot-scope="scope">
											<el-switch v-model="scope.row.display" active-color="#13ce66" inactive-color="#cbcbcb"></el-switch>
										</template>
									</el-table-column>
									<el-table-column property="lock" label="锁列" width="120" header-align="center" align="center">
										<template slot-scope="scope">
											<el-switch v-model="scope.row.lock" active-color="#13ce66" inactive-color="#cbcbcb"></el-switch>
										</template>
									</el-table-column>
									<el-table-column property="example" label="样例" header-align="center"></el-table-column>
								</el-table>
							</div>
						</div>
					</div>
				</div>
			</el-tab-pane>
			
			<el-tab-pane label="表单映射" name="thirdly" >
				<div class="app-mapping">
					<el-table :data="mapping.fieldTableData.data" :tree-props="mapping.fieldTableData.props" row-key="id" height="100%"
						style="width: 100%" default-expand-all>
						<el-table-column property="key" label="字段键" width="220"></el-table-column>
						<el-table-column property="name" label="字段名" width="320" header-align="center"></el-table-column>
						<el-table-column property="inKey" label="关联" width="250" header-align="center">
							<template slot-scope="scope">
								<el-select v-model="scope.row.inKey" v-if="!scope.row.children" size="mini" placeholder="" filterable clearable>
									<el-option v-for="item in datasetFieldSelect.options" :key="item.id" :label="item.label" :value="item.value">
								</el-select>
							</template>
						</el-table-column>
						<el-table-column property="editable" label="是否可编辑" width="160" header-align="center" align="center">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.editable" v-if="!scope.row.children" active-color="#13ce66" inactive-color="#cbcbcb"></el-switch>
							</template>
						</el-table-column>
						<el-table-column property="defaultValue" label="默认值" header-align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.defaultValue" v-if="!scope.row.children" size="mini"></el-input>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-tab-pane>
			
			<el-tab-pane label="其它" name="fourthly" >
				<div class="app-other">
					<el-form :model="other.formData.fields" :rules="other.formData.rules" size="mini" ref="otherFormData" label-width="120px" status-icon>
						<el-form-item label="控件名称：" prop="button.name">
							<el-input v-model="other.formData.fields.button.name"></el-input>
						</el-form-item>
						<el-form-item label="显示样式：" prop="button.type">
							<el-radio-group v-model="other.formData.fields.button.type">
								<el-radio :label="1"><span class="app-other-button-type">按钮</span></el-radio>
								<el-radio :label="2"><span class="app-other-button-type2">连接</span></el-radio>
								<el-radio :label="3"><span class="app-other-button-type3">图标</span></el-radio>
								<el-radio :label="4"><span class="app-other-button-type4">文本</span></el-radio>
								<el-radio :label="0"><span class="app-other-button-type4">无</span></el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="在列表显示：" prop="button.position">
							<el-radio-group v-model="other.formData.fields.button.position">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="字段强制锁定：" prop="formField.lock">
							<el-radio-group v-model="other.formData.fields.formField.lock">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="静默查询：" prop="formField.silent">
							<el-radio-group v-model="other.formData.fields.formField.silent">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>
				</div>
			</el-tab-pane>
			
		</el-tabs>
		
		<template>
		
			<el-dialog title="GetDATA库" :visible.sync="dataset.quote.dialogVisible" width="450px" center>
			  <el-row :gutter="20">
				  <el-col :span="18" :offset="3">
				  	<el-autocomplete v-model="dataset.quote.value" :fetch-suggestions="onQuoteSearchAsync" placeholder="请输入内容" @select="onQuoteHandleSelect" style="width: 100%;"></el-autocomplete>
				  </el-col>
			  </el-row>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dataset.quote.dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="onQuoteConfig">确 定</el-button>
			  </div>
			</el-dialog>
			
		</template>
		
	</div>
	
</body>



<script type="text/javascript" src="../lib/vue.js"></script>

<script type="text/javascript" src="../lib/codemirror/codemirror.js"></script>
<script type="text/javascript" src="../lib/codemirror/groovy.js"></script>
<script type="text/javascript" src="../lib/codemirror/sql.js"></script>
<script type="text/javascript" src="../lib/codemirror/http.js"></script>
<script type="text/javascript" src="../lib/codemirror/addom/hint/show-hint.js"></script>
<script type="text/javascript" src="../lib/codemirror/addom/hint/anyword-hint.js"></script>

<script type="text/javascript" src="../lib/element-ui/index.js"></script>
	
<script type="text/javascript" src="../../../../../plugin/lib/snail.common.js"></script>
<script type="text/javascript" src="../../../../../plugin/lib/codemirror/groovy-hint.js?buildversion=20210715"></script>
<script type="text/javascript" src="./index.js"></script>

</html>